<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tricksiter(韩晨)向您拜年啦</title>
<link rel="icon" href="img/happy.png" type="image/vnd.microsoft.icon" />
<style>
body {
  background: #c6070c;
  font-family: 'Indie Flower', cursive;
}

.puppy .head_eyebrow__left, .puppy .head_eyebrow__right {
  background: #563930;
  width: 32px;
  /*width: 16px;*/
  /*height: 3px;*/
  height: 6px;
  position: absolute;
  z-index: 5;
  bottom: 60px;
}

.puppy .head_eye__left .pupil, .puppy .head_eye__right .pupil {
  width: 10px;
  /*width: 8px;*/
  height: 15px;
  /*height: 12px;*/
  background: black;
  border-radius: 100%;
}
.puppy .head_eye__left .pupil:after, .puppy .head_eye__right .pupil:after {
  content: '';
  background: white;
  width: 4px;
  height: 4px;
  left: 2px;
  top: 1px;
  border-radius: 10px;
  display: block;
  position: absolute;
}

.paw_left, .paw_right {
  position: absolute;
  z-index: 5;
  /*width: 30px;*/
  width: 60px;
  /*height: 20px;*/
  height: 30px;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  background: #b8a392;
}

.puppy .head_eye__left, .puppy .head_eye__right {
  background: white;
  position: absolute;
  z-index: 4;
  /*width: 16px;*/
  width: 25px;
  /*height: 20px;*/
  height: 30px;
  border-radius: 100%;
}

.hide, .paw, .puppy, .puppy .tail {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.puppy .head_earfold__left, .puppy .head_earfold__right {
  position: absolute;
  background: #563930;
  width: 48px;
  /*width: 24px;*/
  height: 76px;
  /*height: 38px;*/
  border-radius: 100%;
  z-index: 10;
  bottom: 60px;
}

.puppy .head_ear__left, .puppy .head_ear__right {
  position: absolute;
  background: #563930;
  width: 40px;
  /*width: 20px;*/
  height: 56px;
  /*height: 28px;*/
  border-radius: 100%;
  z-index: 10;
  bottom: 60px;
}

.puppy .head_eye__left .iris, .puppy .head_eye__right .iris {
  position: relative;
  background: #a3ebe8;
  /*width: 13px;*/
  width: 17px;
  /*height: 16px;*/
  height: 23px;
  border-radius: 100%;
}

.puppy .head_mouth__top, .puppy .head_mouth__left, .puppy .head_mouth__right {
  background: #f8f5f4;
  position: absolute;
  z-index: 3;
}

.puppy .head_bottom__left, .puppy .head_bottom__right {
  background: #cdb7a5;
  position: absolute;
  z-index: 3;
  width: 66px;
  /*width: 33px;*/
  height: 80px;
  /*height: 40px;*/
  border-radius: 100%;
}

.paw_left__part, .paw_right__part {
  width: 20px;
  /*width: 10px;*/
  height: 20px;
  /*height: 10px;*/
  background: #b8a392;
  border-radius: 10px;
  position: absolute;
  bottom: -8px;
  /*bottom: -4px;*/
}
.paw_left__part:nth-of-type(1), .paw_right__part:nth-of-type(1) {
  left: 0px;
}
.paw_left__part:nth-of-type(2), .paw_right__part:nth-of-type(2) {
  left: 20px;
}
.paw_left__part:nth-of-type(3), .paw_right__part:nth-of-type(3) {
  left: 40px;
}

.hide {
  background-image:url(./happy.jpg);
  width: 280px;
  left: -10px;
  height: 280px;
  border: 10px solid #db4b0b;
  z-index: 12;
  bottom: -600px;
}

.paw {
  /*width: 130px;*/
  width: 300px;
  z-index: 10;
}
.paw_left {
  left: 100px;
  /*left: 0;*/
  top: -10px;
}
.paw_right {
  right: -30px;
  /*right: 0px;*/
  top: -10px;
}

.puppy {
  width: 130px;
  height: 0px;
}
.puppy .wrap {
  position: relative;
  -webkit-animation: body 10s infinite;
          animation: body 10s infinite;
}
.puppy .body {
  position: absolute;
  z-index: 1;
  width: 170px;
  /*width: 100px;*/
  /*height: 100px;*/
  height: 160px;
  left: 41px;
  /*left: 13px;*/
  top: -86px;
  /*top: -46px;*/
  border-radius: 100%;
  background: #cdb7a5;
}
/*.puppy .tail {
  -webkit-transform-origin: 5px 100px;
          transform-origin: 5px 100px;
  width: 10px;
  height: 60px;
  top: -40px;
  background: #563930;
  border-radius: 50px;
  -webkit-animation: tail 1s infinite;
          animation: tail 1s infinite;
}*/
.puppy .head {
  position: absolute;
  top: 35px;
  left: 5px;
  -webkit-animation: head 1s infinite;
          animation: head 1s infinite;
}
.puppy .head_eyebrow__left {
  bottom: 190px;
  /*bottom: 124px;*/
  left: 60px;
  /*left: 30px;*/
  -webkit-transform: rotateZ(-14deg);
          transform: rotateZ(-14deg);
  -webkit-animation: eyebrow 10s infinite;
          animation: eyebrow 10s infinite;
}
.puppy .head_eyebrow__right {
  bottom: 190px;
  /*bottom: 124px;*/
  left: 144px;
  /*left: 74px;*/
  -webkit-transform: rotateZ(14deg);
          transform: rotateZ(14deg);
  -webkit-animation: eyebrow2 10s infinite;
          animation: eyebrow2 10s infinite;
}
.puppy .head_earfold {
  position: relative;
  top: -6px;
}
.puppy .head_earfold__right {
  bottom: 170px;
  /*bottom: 120px;*/
  left: 190px;
  /*left: 79px;*/
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
}
.puppy .head_earfold__left {
  bottom: 170px;
  /*bottom: 120px;*/
  left: 8px;
  /*left: 18px;*/
  -webkit-transform: rotateZ(30deg);
          transform: rotateZ(30deg);
}
.puppy .head_ear {
  position: relative;
  top: -6px;
}
.puppy .head_ear__left {
  bottom: 190px;
  /*bottom: 130px;*/
  -webkit-transform: rotateZ(-50deg);
          transform: rotateZ(-50deg);
  left: 30px;
}
.puppy .head_ear__right {
  bottom: 190px;
  /*bottom: 130px;*/
  -webkit-transform: rotateZ(50deg);
          transform: rotateZ(50deg);
  left: 170px;
  /*left: 70px;*/
}
.puppy .head_top {
  background: #cdb7a5;
  /*width: 70px;*/
  width: 140px;
  /*height: 70px;*/
  height: 140px;
  position: absolute;
  z-index: 3;
  left: 50px;
  /*left: 25px;*/
  /*bottom: 80px;*/
  bottom: 120px;
  /*border-radius: 80px;*/
  border-radius: 160px;
}
.puppy .head_bottom__right {
  left: 137px;
  /*left: 67px;*/
  /*bottom: 70px;*/
  bottom: 100px;
}
.puppy .head_bottom__left {
  /*left: 20px;*/
  left: 40px;
  /*bottom: 70px;*/
  bottom: 100px;
}
.puppy .head_eye__left {
  left: 60px;
  /*left: 32px;*/
  bottom: 150px;
  /*bottom: 100px;*/
}
.puppy .head_eye__left .iris {
  top: 2px;
  left: 2px;
}
.puppy .head_eye__left .pupil {
  position: relative;
  left: 4px;
  bottom: 12px;
  -webkit-animation: eye 10s infinite;
          animation: eye 10s infinite;
}
.puppy .head_eye__right {
  left: 152px;
  /*left: 72px;*/
  bottom: 150px;
  /*bottom: 100px;*/
}
.puppy .head_eye__right .iris {
  top: 2px;
  left: 2px;
}
.puppy .head_eye__right .pupil {
  position: relative;
  left: 4px;
  bottom: 14px;
  /*bottom: 12px;*/
  -webkit-animation: eye 10s infinite;
          animation: eye 10s infinite;
}
.puppy .head_tongue {
  position: absolute;
  background: pink;
  /*width: 14px;*/
  width: 28px;
  height: 50px;
  /*height: 30px;*/
  border-radius: 40px;
  z-index: 3;
  bottom: 80px;
  /*bottom: 50px;*/
  left: 105px;
  /*left: 54px;*/
  -webkit-animation: tongue 1s infinite;
          animation: tongue 1s infinite;
}
.puppy .head_nose {
  background: #563930;
  width: 32px;
  /*width: 16px;*/
  height: 20px;
  /*height: 10px;*/
  border-radius: 40px;
  /*border-radius: 20px;*/
  position: absolute;
  z-index: 5;
  left: 104px;
  /*left: 52px;*/
  bottom: 103px;
  /*bottom: 83px;*/
}
.puppy .head_nose:after {
  content: '';
  display: block;
  background: rgba(255, 255, 255, 0.3);
  position: absolute;
  border-radius: 10px;
  width: 4px;
  left: 3px;
  bottom: 4px;
  height: 4px;
}
.puppy .head_mouth__top {
  width: 60px;
  /*width: 30px;*/
  height: 60px;
  /*height: 30px;*/
  border-radius: 100%;
  left: 90px;
  /*left: 45px;*/
  /*bottom: 73px;*/
  bottom: 103px;
}
.puppy .head_mouth__left {
  /*width: 33px;*/
  width: 66px;
  height: 50px;
  /*height: 25px;*/
  border-radius: 100%;
  left: 66px;
  /*left: 33px;*/
  bottom: 85px;
  /*bottom: 65px;*/
}
.puppy .head_mouth__left:after {
  width: 60px;
  /*width: 30px;*/
  height: 40px;
  /*height: 20px;*/
  background: #f8f5f4;
  content: '';
  position: absolute;
  z-index: 5;
  border-radius: 10px;
  /*border-radius: 5px;*/
  left: 6px;
  /*left: 3px;*/
  bottom: 23px;
  /*bottom: 11px;*/
  display: block;
  -webkit-transform: rotatez(-43deg);
          transform: rotatez(-43deg);
}
.puppy .head_mouth__right {
  width: 66px;
  /*width: 33px;*/
  height: 50px;
  /*height: 25px;*/
  border-radius: 100%;
  /*left: 56px;*/
  left: 106px;
  bottom: 85px;
  /*bottom: 65px;*/
}
.puppy .head_mouth__right:after {
  width: 60px;
  /*width: 30px;*/
  height: 40px;
  /*height: 20px;*/
  background: #f8f5f4;
  content: '';
  position: absolute;
  z-index: 5;
  /*border-radius: 5px;*/
  border-radius: 10px;
  left: -2px;
  /*left: -1px;*/
  bottom: 23px;
  /*bottom: 11px;*/
  display: block;
  -webkit-transform: rotatez(42deg);
          transform: rotatez(42deg);
}

@-webkit-keyframes tail {
  0% {
    -webkit-transform: translateY(-50%) rotateZ(-45deg);
            transform: translateY(-50%) rotateZ(-45deg);
  }
  50% {
    -webkit-transform: translateY(-50%) rotateZ(45deg);
            transform: translateY(-50%) rotateZ(45deg);
  }
  100% {
    -webkit-transform: translateY(-50%) rotateZ(-45deg);
            transform: translateY(-50%) rotateZ(-45deg);
  }
}

@keyframes tail {
  0% {
    -webkit-transform: translateY(-50%) rotateZ(-45deg);
            transform: translateY(-50%) rotateZ(-45deg);
  }
  50% {
    -webkit-transform: translateY(-50%) rotateZ(45deg);
            transform: translateY(-50%) rotateZ(45deg);
  }
  100% {
    -webkit-transform: translateY(-50%) rotateZ(-45deg);
            transform: translateY(-50%) rotateZ(-45deg);
  }
}
@-webkit-keyframes head {
  0% {
    top: 35px;
  }
  50% {
    top: 40px;
  }
  100% {
    top: 35px;
  }
}
@keyframes head {
  0% {
    top: 35px;
  }
  50% {
    top: 40px;
  }
  100% {
    top: 35px;
  }
}
@-webkit-keyframes tongue {
  0% {
    bottom: 50px;
  }
  50% {
    bottom: 46px;
  }
  100% {
    bottom: 50px;
  }
}
@keyframes tongue {
  0% {
    bottom: 50px;
  }
  50% {
    bottom: 46px;
  }
  100% {
    bottom: 50px;
  }
}
@-webkit-keyframes eyebrow {
  0% {
    -webkit-transform: rotateZ(-3deg) translateY(4px);
            transform: rotateZ(-3deg) translateY(4px);
  }
  30% {
    -webkit-transform: rotateZ(-3deg) translateY(4px);
            transform: rotateZ(-3deg) translateY(4px);
  }
  35% {
    -webkit-transform: rotateZ(-17deg) translateY(-2px);
            transform: rotateZ(-17deg) translateY(-2px);
  }
  100% {
    -webkit-transform: rotateZ(-17deg) translateY(-2px);
            transform: rotateZ(-17deg) translateY(-2px);
  }
}
@keyframes eyebrow {
  0% {
    -webkit-transform: rotateZ(-3deg) translateY(4px);
            transform: rotateZ(-3deg) translateY(4px);
  }
  30% {
    -webkit-transform: rotateZ(-3deg) translateY(4px);
            transform: rotateZ(-3deg) translateY(4px);
  }
  35% {
    -webkit-transform: rotateZ(-17deg) translateY(-2px);
            transform: rotateZ(-17deg) translateY(-2px);
  }
  100% {
    -webkit-transform: rotateZ(-17deg) translateY(-2px);
            transform: rotateZ(-17deg) translateY(-2px);
  }
}
@-webkit-keyframes eyebrow2 {
  0% {
    -webkit-transform: rotateZ(3deg) translateY(4px);
            transform: rotateZ(3deg) translateY(4px);
  }
  30% {
    -webkit-transform: rotateZ(3deg) translateY(4px);
            transform: rotateZ(3deg) translateY(4px);
  }
  35% {
    -webkit-transform: rotateZ(17deg) translateY(-2px);
            transform: rotateZ(17deg) translateY(-2px);
  }
  100% {
    -webkit-transform: rotateZ(17deg) translateY(-2px);
            transform: rotateZ(17deg) translateY(-2px);
  }
}
@keyframes eyebrow2 {
  0% {
    -webkit-transform: rotateZ(3deg) translateY(4px);
            transform: rotateZ(3deg) translateY(4px);
  }
  30% {
    -webkit-transform: rotateZ(3deg) translateY(4px);
            transform: rotateZ(3deg) translateY(4px);
  }
  35% {
    -webkit-transform: rotateZ(17deg) translateY(-2px);
            transform: rotateZ(17deg) translateY(-2px);
  }
  100% {
    -webkit-transform: rotateZ(17deg) translateY(-2px);
            transform: rotateZ(17deg) translateY(-2px);
  }
}
@-webkit-keyframes body {
  0% {
    top: 170px;
  }
  10% {
    top: 60px;
  }
  40% {
    top: 60px;
  }
  41% {
    top: 60px;
  }
  51% {
    top: 0px;
  }
  90% {
    top: 0px;
  }
  100% {
    top: 170px;
  }
}
@keyframes body {
  0% {
    top: 170px;
  }
  10% {
    top: 60px;
  }
  40% {
    top: 60px;
  }
  41% {
    top: 60px;
  }
  51% {
    top: 0px;
  }
  90% {
    top: 0px;
  }
  100% {
    top: 170px;
  }
}
@-webkit-keyframes eye {
  0% {
    left: 4px;
    bottom: 12px;
  }
  10% {
    left: 4px;
    bottom: 12px;
  }
  15% {
    left: 0px;
    bottom: 12px;
  }
  20% {
    left: 8px;
    bottom: 12px;
  }
  25% {
    left: 4px;
    bottom: 12px;
  }
}
@keyframes eye {
  0% {
    left: 4px;
    bottom: 12px;
  }
  10% {
    left: 4px;
    bottom: 12px;
  }
  15% {
    left: 0px;
    bottom: 12px;
  }
  20% {
    left: 8px;
    bottom: 12px;
  }
  25% {
    left: 4px;
    bottom: 12px;
  }
}
#dog{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  -webkit-transform: translateX(-7%) translateY(15%);
            transform:  translateX(-7%) translateY(15%);

}
</style>
<style type="text/css">
body {
    background-color: #c6070c;
    color: #ffe392;
    font-family: "Lato", Helvetica, Arial, Hiragino Sans GB W6, sans-serif;
    text-align: center;
}
table {
    padding-top: 80px;
    margin: auto;
    width: 30%;
}
.pinyin {
    height: 20px;
    font-size: 2em;
    letter-spacing: 3px;
    font-weight: 400;
}
td {
    font-size: 8em;
    text-align: center;
    font-weight: 700;
    padding: 0px;
}
h2 {
    margin-top: 15px;
    margin-bottom: 100px;
    font-size: 3em;
    text-transform: uppercase;
    font-weight: 700;
    word-spacing: 5px;
}
p {
    font-weight: 700;
    letter-spacing: 1px;
    word-spacing: 2px;
}
button {
    background-color: #ef941a;
    color: #fffbe2;
    width: 200px;
    position: relative;
    border-radius: 5px;
    margin: 0;
    padding: 0;
    line-height: 0.5;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}
button:hover,
button:focus {
    background-color: #efa134;
}
button:active {
    transform: translate(0px, 2px);
    -webkit-transform: translate(0px, 2px);
}
#words{
  position: fixed;
  width: 100%;
  height: 50%;
  top:0;
  left:0;
  z-index: 10;
}
</style>
<script src="http://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="words">
      <table>
        <tr>
            <th class="pinyin" id="pinyin1">xīn</th>
            <th class="pinyin" id="pinyin2">nián</th>
            <th class="pinyin" id="pinyin3">kuài</th>
            <th class="pinyin" id="pinyin4">lè</th>
        </tr>
        <tr>
            <td id="phraseChinese1">新</td>
            <td id="phraseChinese2">年</td>
            <td id="phraseChinese3">快</td>
            <td id="phraseChinese4">樂</td>
        </tr>
    </table>

    <h2 id="phraseEnglish">(Happy new year)</h2>

</div>
<div id="dog">

  <div class='paw'>
    <div class='paw_left'>
      <div class='paw_left__part'></div>
      <div class='paw_left__part'></div>
      <div class='paw_left__part'></div>
    </div>
    <div class='paw_right'>
      <div class='paw_left__part'></div>
      <div class='paw_left__part'></div>
      <div class='paw_left__part'></div>
    </div>
  </div>
  <div class='puppy'>
    <div class='hide'></div>
    <div class='wrap'>
      <div class='body'></div>
      <div class='tail'></div>
      <div class='head'>
        <div class='head_eyebrow'>
          <div class='head_eyebrow__left'></div>
          <div class='head_eyebrow__right'></div>
        </div>
        <div class='head_ear'>
          <div class='head_ear__left'></div>
          <div class='head_ear__right'></div>
        </div>
        <div class='head_earfold'>
          <div class='head_earfold__left'></div>
          <div class='head_earfold__right'></div>
        </div>
        <div class='head_eye'>
          <div class='head_eye__left'>
            <div class='iris'></div>
            <div class='pupil'></div>
          </div>
          <div class='head_eye__right'>
            <div class='iris'></div>
            <div class='pupil'></div>
          </div>
        </div>
        <div class='head_tongue'></div>
        <div class='head_nose'></div>
        <div class='head_top'></div>
        <div class='head_bottom'>
          <div class='head_bottom__left'></div>
          <div class='head_bottom__right'></div>
        </div>
        <div class='head_mouth'>
          <div class='head_mouth__left'></div>
          <div class='head_mouth__right'></div>
          <div class='head_mouth__top'></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- / Peeping puppy -->

<script type="text/javascript">
    var pinyin1 = document.getElementById("pinyin1");
var pinyin2 = document.getElementById("pinyin2");
var pinyin3 = document.getElementById("pinyin3");
var pinyin4 = document.getElementById("pinyin4");

var phraseChinese1 = document.getElementById("phraseChinese1");
var phraseChinese2 = document.getElementById("phraseChinese2");
var phraseChinese3 = document.getElementById("phraseChinese3");
var phraseChinese4 = document.getElementById("phraseChinese4");

var phraseEnglish = document.getElementById("phraseEnglish");

var button = document.getElementById("button");
var random = Math.random();

// Arrays for pinyin and Chinese characters
var p1 = [
    "xīn",
    "gōng",
    "dà",
    "wàn",
    "nián",
    "shēn",
    "xīn",
    "gōng"
];

var p2 = [
    "nián",
    "xǐ",
    "jí",
    "shì",
    "nián",
    "tǐ",
    "xiǎng",
    "hè"
];

var p3 = [
    "kuài",
    "fā",
    "dà",
    "rú",
    "yǒu",
    "jiàn",
    "shì",
    "xīn"
];

var p4 = [
    "lè",
    "cái",
    "lì",
    "yì",
    "yú",
    "kāng",
    "chéng",
    "xǐ"
];

var phrasesC1 = [
    "新",
    "恭",
    "大",
    "萬",
    "年",
    "身",
    "心",
    "恭"
];

var phrasesC2 = [
    "年",
    "喜",
    "吉",
    "事",
    "年",
    "體",
    "想",
    "賀"
];

var phrasesC3 = [
    "快",
    "發",
    "大",
    "如",
    "有",
    "健",
    "事",
    "新"
];

var phrasesC4 = [
    "樂",
    "財",
    "利",
    "意",
    "餘",
    "康",
    "成",
    "禧"
];

// English phrases
// Translations taken from here: http://www.travelsintranslation.com/2014/01/cantonese-chinese-new-year-phrases/
var phrasesE = [
    "(Happy new year)",
    "(Congratulations on your prosperity)",
    "(Great luck and prosperity)",
    "(May 10,000 things go according to your wishes)",
    "(Every year have more than you need)",
    "(Wishing you good health)",
    "(May all your heart's desires come true)",
    "(Congratulations in the new year)"
];

// Sets text content as random phrase from arrays
pinyin1.textContent = p1[Math.floor(random * p1.length)];
pinyin2.textContent = p2[Math.floor(random * p2.length)];
pinyin3.textContent = p3[Math.floor(random * p3.length)];
pinyin4.textContent = p4[Math.floor(random * p4.length)];
phraseChinese1.textContent = phrasesC1[Math.floor(random * phrasesC1.length)];
phraseChinese2.textContent = phrasesC2[Math.floor(random * phrasesC2.length)];
phraseChinese3.textContent = phrasesC3[Math.floor(random * phrasesC3.length)];
phraseChinese4.textContent = phrasesC4[Math.floor(random * phrasesC4.length)];
phraseEnglish.textContent = phrasesE[Math.floor(random * phrasesE.length)];

</script>
</body>
</html>
